<template>
  <div>
    <Form :model="collectionModel" ref="collectionForm" label-colon :show-message="false" :label-width="130">
      <FormItem label="产品集合标题" prop="title">
        <Input type="text" v-model.trim="collectionModel.title" style="width: 430px;" placeholder="内部使用，可中文"></Input>
      </FormItem>
      <FormItem label="产品集合类型" prop="type" required >
        <Select v-model="collectionModel.type" placeholder="产品集合类型" style="width: 430px;" @on-change="changeType()">
          <Option v-for="item in collectionTypes" :disabled="isCollectionTypeDisabled(item.value)" :key="item.value" :value="item.value" >{{item.label}}</Option>
        </Select>
      </FormItem>

      <FormItem label="组合条件"  v-if="isKeywordType" >
        <Checkbox label="分类" v-model="collectionModel.hasCategory" @on-change="switchCondition(2)">分类</Checkbox>
        <Checkbox label="关键词" v-model="collectionModel.hasKeyword" @on-change="switchCondition(0)" >关键词</Checkbox>
        <Checkbox label="上架日期" v-model="collectionModel.hasDate"  @on-change="switchCondition(1)" >上架日期</Checkbox>
      </FormItem>
      <FormItem label="关联分类" prop="classificationId" v-if="isKeywordType&&collectionModel.hasCategory">
        <Cascader :data="categoryLevel1" :value="categoryCurrent" @on-change="categorySelected" change-on-select clearable placeholder="产品分类"
                  class="input_item"  transfer></Cascader>
      </FormItem>
        <FormItem label="搜索关键词" prop="keyword"  :required="collectionModel.hasKeyword" v-if="isKeywordType&&collectionModel.hasKeyword">
          <Input type="text" v-model.trim="collectionModel.keyword" @input.native="formatKeyword" style="width: 430px;" placeholder="例如 'girl dress'可过滤出童装的女生裙子"></Input>
        </FormItem>

        <FormItem v-if="isKeywordType&&collectionModel.hasDate" label="上架日期" :required="collectionModel.hasDate&&!collectionModel.publishedStartDate">
          <Alert type="warning" >必须选择产品上架的起始日期，结束日期可以不选。</Alert>
        <DatePicker type="date" v-model="collectionModel.publishedStartDate" :options="startDateOptions"  format="yyyy-MM-dd" class="y_condition" placeholder="选择起始日期" ></DatePicker>&nbsp;-&nbsp;
        <DatePicker type="date"  v-model="collectionModel.publishedEndDate" :options="endDateOptions"  format="yyyy-MM-dd" class="y_condition" placeholder="选择结束日期" ></DatePicker>
        </FormItem>
        <FormItem label="过滤条件" prop="filters" v-if="isKeywordType">
          <Button type="primary" @click="addFilter()" icon="md-add">添加</Button>
        </FormItem>
        <template v-if="isKeywordType&&collectionModel.filters!=null && collectionModel.filters.length>0">
          <FormItem v-for="(item, index) in collectionModel.filters" :key="index">
            <ProductFilter :value="item"></ProductFilter>
            <Button type="error" icon="md-remove-circle" @click="removeFilter(index)" size="small" style="margin-left: 10px;">删除</Button>
          </FormItem>
        </template>
      <FormItem label="屏蔽切面" prop="returnFilters" v-show="isKeywordType">
        <Select v-model="collectionModel.returnFilters" multiple class="input_item">
          <Option v-for="(item, index) in returnFilters" :key="index" :value="item.name">{{item.cnName}}</Option>
        </Select>
      </FormItem>
    </Form>
  </div>
</template>

<script>
import commonData from "./js/stand/common_data";
import ProductFilter from "./productFilter/ProductFilter";
import {isEmpty, isNotEmpty} from "../js/commonUtils";
import tiyData from "./js/stand/booth_data"

export default {
  name: "CollectionForm",
  props: {
    collectionModel: {type: Object, required: true},
  },
  components: {
    ProductFilter,
  },
  data() {
    return {
      collectionTypes: commonData.collectionDic.types,
      boothItemStatus: tiyData.tStatus.boothItem,
      collectionProducts: tiyData.tParam.editParam.collectionProducts,
      dateRange: {startDate:"", endDate:""},
      returnFilters:commonData.returnFilters,
    }
  },
  methods: {
    isCollectionTypeDisabled(type) {
      return type == commonData.collectionDic.categoryType;
    },
    addFilter() {
      this.collectionModel.filters.push({field: "", value: ""});
    },
    removeFilter(index) {
      this.collectionModel.filters.splice(index, 1);
    },
    isNotEmpty(val) {
      return isNotEmpty(val);
    },
    showCollectionProductsModal() {
      tiyData.tParam.editParam.collectionProducts.collectionId = this.collectionModel.id;
      tiyData.tParam.editParam.collectionProducts.modifyingTime = new Date().getTime();
      tiyData.tStatus.boothItem.modalProducts.isShow = true;
    },
    formatKeyword() {
        if(this.collectionModel.type == commonData.collectionDic.keywordType){
            this.collectionModel.keyword = this.collectionModel.keyword.toLowerCase();
        }
    },
    changeType(){//变更产品集合类型
        this.collectionModel.keyword = "";
        // this.dateRange.startDate = "";
        // this.dateRange.endDate = "";
        this.$ySpliceAll(this.collectionModel.filters);
    },

    categorySelected(value, selectedData) {
      if (0 < selectedData.length) {
        this.collectionModel.classificationId = selectedData[selectedData.length - 1].value;
      } else {
        this.collectionModel.classificationId = '';
      }
    },
    switchCondition(type) {
      if (type == 0 && !this.collectionModel.hasKeyword) {
        this.collectionModel.keyword = "";
      } else if (type == 1 && !this.collectionModel.hasDate) {
        this.collectionModel.publishedStartDate = "";
        this.collectionModel.publishedEndDate = "";
      } else if (type == 2 && !this.collectionModel.hasCategory) {
        this.collectionModel.classificationId = "";
        this.categoryCurrent.splice(0);
      }
    }
  },
  computed: {
    isKeywordType() {
      return this.collectionModel.type == commonData.collectionDic.keywordType;
    },
    isCustomType() {
      return this.collectionModel.type == commonData.collectionDic.customType;
    },
    isDateRangeType() {
        return this.collectionModel.type == commonData.collectionDic.dateRangeType;
    },
    isAdd() {
      return isEmpty(this.collectionModel.id);
    },
    startDateOptions() {
      let _self = this;
      return {
        disabledDate(date) {
          if (_self.collectionModel.publishedEndDate != '') {
            return date && date.valueOf() >= new Date(_self.collectionModel.publishedEndDate).valueOf();
          } else {
            return false
          }
        }
      }
    },
    endDateOptions() {
      let _self = this;
      return {
        disabledDate(date) {
          if (_self.collectionModel.publishedStartDate != '') {
            return date && date.valueOf() <=new Date(_self.collectionModel.publishedStartDate).valueOf();
          } else {
            return false
          }
        }
      }
    },
    categoryLevel1(){
      let categoryLevel1 = [];
      commonData.categoryList.forEach(item=>{
        let item_copy = JSON.parse(JSON.stringify(item));
        //item_copy.children = [];
        categoryLevel1.push(item_copy);
      });
      return categoryLevel1;
    },
    categoryCurrent(){
      var categoryCurrent = [];
      if(this.collectionModel.classificationId!=''){
        categoryCurrent.push(this.collectionModel.classificationId)
      }
      return categoryCurrent;
    }
  },

}
</script>

<style scoped>

</style>
